網頁可以被視為是用來呈現資訊的文件集，也能被視為一套複雜的應用程式
這兩種面像都需要具語意的HTML標籤來描述要呈現的內容，也都能從 功用型的樣式設定法(intent-based styling) 上獲益。
功用型樣式設定法有助於創建出更好的架構，將樣式組織成不同的分類能讓樣式碼更容易複用，也更容易達到預期的效果。
瀏覽器有其內建的預設樣式表(stylesheet)，稱之為 使用者代理人樣式表(user agentstylesheet) ，瀏覽器會將這些預設樣式套用到HTML文件上。
樣式正規化(normalizing styles) 提供不同元素的屬性預設值，若沒有預設值的話不同的瀏覽器會為網頁中的元素套用不同的樣式預設值。
基底樣式(base styles) 用來做為其他特定度更高之樣式的建構基點，他們會套用到只帶單一類型選擇器的元素上，或是由類型選擇器、組合器以及任何套用到其上的虛擬類別所形成的簡單組合上。
除了正規化樣式之外，基底樣式應該是樣式表中特定度最低的樣式。
HTML元素已設定了基底樣式就不需要再重新宣告，除非該樣式有不同的用途。
編寫基底樣式時要注意的原則是，在元素上若需套用更多樣式，後來添加的樣式應該不需要去複寫太多基底樣式就可以做出來。
基底樣式應該只設定最常使用的屬性與值：
color
font-family
font-size
letter-spacing
line-height
margin
padding
如果網站的本質是訊息性質，設定這些樣式可能就已足夠。
編寫基本屬性時，要考慮到上列的屬性，這些屬性都可由 上原(ancestors) 繼承而來(除了margin和padding之外)，並非每一次都要設定這些屬性。
文件詮釋資料(metadata) ，標籤包括<head>、<title>、<base>、<meta>等
因為使用者看不到他們，所以無法指定這些標籤的樣式。
分段元素(sectioning elements) 包括<address>、<article>、<aside>、<body>、<footer>、<header>、<nav>、<section>等
這些元素通常會包含其他元素，構成HTML文件中不同的段落。
考慮在分段元素上設定下列屬性：
color
font-family
font-size
font-weight
letter-spacing
line-height
padding
標頭元素(heading elements) 包括<h1>-<h6>用來定義每一個不同段落主題的元素。
文本元素(text elements) 包括<figure>、<figcaption>、<p>、<pre>用來顯示文本區塊。
在鏢頭與文本元素上應考慮定義下列屬性：
font-family
font-size
font-weight
letter-spacing
line-height
margin-bottom
margin-top
iThome鐵人賽
看影片追技術